import {Button, Card, Col, Image, Row, Space, Table} from "antd";
import {EditOutlined, DeleteOutlined} from "@ant-design/icons"
import {goods} from '../../../api'
import {useEffect, useState} from "react";
import styles from './index.module.css'
import * as events from "events";

function List() {
    const [dataSource, setDataSource] = useState([])
    useEffect(() => {
        document.title = '商品列表'

        // 加载列表
        async function loadList() {
            let {status, data} = await goods.getList()
            if (status) {
                // 传递新数组
                setDataSource([...data])
            }
            console.log(data)
        }

        loadList()

        return () => {
            document.title = '商城后台管理系统'
        }
    }, [])


    let handleDelete = (name, id, e) => {
        e.stopPropagation()
        console.log(name, id)
    }
    let handleEdit = (name, id, e) => {
        e.stopPropagation()
        console.log(name, id)
    }

    const columns = [
        {
            title: '商品名称', dataIndex: 'name', key: '',
            render: (text, item, index) => {
                return (
                    <div className={styles.goods_name_box}>
                        <Image src={item.img_lg} className={styles.img} height={80} width={80}></Image>
                        <div className={styles.text}>
                            <p>{text}</p>
                            <p>商品货号：{item.articleNo}</p>
                        </div>
                    </div>
                )
            }
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: '',
            sorter: {
                compare: (a, b) => a.price - b.price,
                multiple: 1,
            },
        },
        {
            title: '库存',
            dataIndex: 'inventory',
            key: 'inventory',
            sorter: {
                compare: (a, b) => a.inventory - b.inventory,
                multiple: 2,
            },
        },
        {
            title: '发布时间',
            dataIndex: 'create_time',
            key: 'create_time',
            sorter: {
                compare: (a, b) => a.create_time - b.create_time,
                multiple: 3,
            },
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (_, {name, id}) => {
                return (
                    <>
                        <Space>
                            <Button onClick={(event) => handleEdit(name, id, event)} type='primary'
                                    icon={<EditOutlined/>}>编辑</Button>
                            <Button onClick={(event) => handleDelete(name, id, event)} type='primary' danger
                                    icon={<DeleteOutlined/>}>删除</Button>
                        </Space>
                    </>
                )
            }

        },
    ]


    return (
        <>
            <Card title='商品列表'>
                <Table columns={columns} dataSource={dataSource}></Table>
            </Card>
        </>
    )
}

export default List